<template>
	<div class="box" :style="{ backgroundImage: `url(${loginbc})` }">
		<div class="login_head" style="float:left;">
			<div class="login">
				<el-link class="login_span2">账号登录</el-link>
			</div>
			<!-- 账号密码登录 -->
			<el-form :model="loginForm" :rules="rules" ref="loginFormByUser" label-width="50px" class="content">
				<el-form-item  prop="loginName">
					<el-input placeholder="账号" v-model="loginForm.loginName" clearable  class="login_input" style="width:80%"></el-input>
				</el-form-item>
				<el-form-item  prop="password">
					<el-input type="password" placeholder="密码" v-model="loginForm.password" clearable  class="login_input1" style="width:80%"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" plain style="width:80%" @click="LoginByUser('loginFormByUser')">立即登录</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="login_head1" style="float:left;width:300px;height:430px;" :style="{ backgroundImage: `url(${login})` }">
			<img src="@/assets/易游小logo.png" alt="" style="margin-top:25%;margin-left:17%">
			<p class="link" style="font-size:15px;margin-left:36%;color:black">易游旅行后端管理</p>
			<p class="link" style="font-size:15px;margin-left:26%;margin-top:10px;color:black">下载易游app,旅游无烦恼</p>
		</div>
	</div>
</template>

<script>
import login from '@/assets/ChMkLGJ4c1aIDrEAAFSdL28IjOYAADMnwAAAAAAVJ1H047.jpg'
import loginbc from '@/assets/ChMkLGJ4c1aIDrEAAFSdL28IjOYAADMnwAAAAAAVJ1H047.jpg'
const axios = require('axios');
export default {
	name: 'loginViews',
	data () {
		return {
			// 账号登录 表单状态
			loginbc: loginbc, // 整个背景图片
			login: login, // login下的背景图片
			loginForm:{ // 输入框集合
				// 登录名
				loginName:'',
				// 密码
				password:'',
			},
			// 校验规则
			rules: {
				loginName: [
					{ required: true, message: '请输入登录账号', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
				],
			},
		}
	},
	methods: {
		// 根据账号登录
		LoginByUser () {
			axios.get('http://127.0.0.1:8082/userManagement/loginByUser', {
				params:{
					loginName: this.loginForm.loginName,
					password: this.loginForm.password
				}
			}).then(res => {
				if (res.data.flag) {
                    this.message('登录成功', 'success')
                    window.sessionStorage.setItem('token', res.data.obj.token)
                    window.sessionStorage.setItem('id', res.data.obj.user.id)
					window.sessionStorage.setItem('loginName', res.data.obj.user.loginName)
					console.log(window,sessionStorage.getItem('loginName'))
					window.sessionStorage.setItem('userName',res.data.obj.user.userName)
					window.sessionStorage.setItem('avatarId',res.data.obj.user.avatarId)
					this.$router.push({path: '/home'})
				} else {
					this.message('账号密码不正确', 'warning')
				}
			}).catch(error => {
				this.$message.error('服务器崩溃了，请稍后再尝试使用！');
			})
		},
        //消息提示框
        message(message,type){
            this.$message({
                message:message,
                type: type
            });
        },
	}
}
</script>


<style>
.login{
	width:330px;
	margin: 0 auto;
	margin-top: 70px;
	text-align: center;
}
.login .login_span1{
	position: relative;
	font-size: 18px;
	z-index: 10000000;
    cursor: pointer;
}
.login .login_span2{
	position: relative;
	font-size: 18px;
	z-index: 10000000;
    cursor: pointer;
}
.login .login_span3{
	position: relative;
	font-size: 18px;
	z-index: 10000000;
    cursor: pointer;
}
.box {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.login_head {
	background-color: rgb(255, 255, 255);
	width: 430px;
	height: 430px;
	margin-top: 230px;
	margin: 50 auto;
	margin-top: 50 auto;
	margin-left: 29%;
}
.login_head1 {
	background-color: rgb(41, 38, 78);
	width: 430px;
	height: 430px;
	margin: 0 auto;
	margin-right: auto;
	margin-top: 230px;
}
.content {
	width: 100%;
	height: 40%;
	margin: 0 auto;
	margin-top:-50px;
}
.login_input{
	margin-top: 100px;
}
.login_butto1{
	width: 70%;
}
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed;
}
</style>